<template>
  <div class="father">
    <h2>自定义组件</h2>
    <h3>父组件</h3>
    <h4>{{ str }}</h4>
    <button @click="test">点我</button>
    <h3 v-show="toy">儿子给的玩具:{{ toy }}</h3>
    <!-- abc是自定义事件  xyz是回调函数  给Child绑定事件 -->
    <child @send-toy="sendtoy" />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import Child from "./Child.vue";
let toy = ref("");
let str = ref("你好");
function test() {
  str.value = "哈哈";
}
function sendtoy(value: string) {
  console.log("send-toy", value);
  toy.value = value;
}
</script>

<style scoped>
.father {
  background-color: rgb(126, 126, 126);
  padding: 10px;
  box-shadow: 0 0 10px black;
  border-radius: 10px;
}
</style>
